<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>桑基图 type = sankey</title>
  <script src="./echarts.js"></script>

  <style lang="css">
    #chart1 {
      width: 1000px;
      height: 650px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption({
      title: {
        text: '世界杯',
      },
      series: [
        {
          type: 'sankey',
          nodeWidth: 20,
          nodeGap: 8,
          nodeAlign: 'right', // 在官网例子中有效，在自己例子中无效。。。
          orient: 'horizontal',
          draggable: false,
          focusNodeAdjacency: true, // focusNodeAdjacency与emphasis有关系，值为false，emphasis才有效
          levels: [{
            depth: 0,
            itemStyle: {
              color: 'pink'
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6
            }
          }, {
            depth: 1,
            itemStyle: {
              color: '#b3cde3'
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6
            }
          }],
          label: {
            align: 'left',
            // verticalAlign: 'middle',
            fontSize: 12,
            fontWeight: 'bold',
            color: 'green',
            // formatter: function (params) {
            //   return params.data.name
            // }
          },
          itemStyle: {
            shadowBlur: 10,
            shadowBlurColor: 'rgba(0, 0, 0, 0.3)'
          },
          lineStyle: {
            curveness: 0.5,
          },
          emphasis: { // focusNodeAdjacency值为false时才有效
            label: {
              fontSize: 30,
            },
            itemStyle: {
              borderWidth: 3
            },
          },
          data: [
            {
              name: '德国',
            },
            {
              name: '法国',
            },
            {
              name: '英国',
              depth: 0
            },
            {
              name: '克罗地亚',
            },
            {
              name: '巴西',
            },
            {
              name: '比利时',
            },
            {
              name: '阿根廷',
              depth: 2
            },
            {
              name: '葡萄牙',
              depth: 1
            },
            {
              name: '西班牙',
              depth: 3
            },
          ],
          links: [
            {
              source: '德国',
              target: '巴西',
              value: 2
            },
            {
              source: '法国',
              target: '比利时',
              value: 1
            },
            {
              source: '法国',
              target: '克罗地亚',
              value: 1
            },
            {
              source: '法国',
              target: '巴西',
              value: 3
            },
            {
              source: '英国',
              target: '葡萄牙',
              value: 2
            },
            {
              source: '葡萄牙',
              target: '阿根廷',
              value: 4
            },
            {
              source: '阿根廷',
              target: '西班牙',
              value: 4
            },
          ],
        }
      ],
    })
  </script>
</body>

</html>